<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾直接财产损失申报统计表</h1>
      </div>
      <p flex="main:justify" /><p flex="main:justify">
        <!-- <span>受损单位（印章）/个人：杭州滨江区江陵路111号门</span>
        <span>地址：xx市xx路xx号</span> -->
        <span>受损单位（印章）/ 个人：
          <input v-if="patternIsEdit" v-model="tableData.unit" type="text" class="custom_input">
          <span v-else>{{ tableData.unit }}</span>
        </span>
        <span>地址：
          <input v-if="patternIsEdit" v-model="tableData.address" type="text" class="custom_input">
          <span v-else>{{ tableData.address }}</span>
        </span>
      </p>

      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <th colspan="10">以下由受损单位（个人）填写</th>
          <th colspan="10">以下由公安机关消防机构填写</th>
        </tr>
        <tr>
          <th rowspan="10">建构筑物及装修</th>
          <th>序号</th>
          <th colspan="2">建筑结构及装修名称</th>
          <th colspan="2">烧损面积（m2）</th>
          <th colspan="2">建造时价格（元）</th>
          <th colspan="2">已使用时间（年）</th>
          <th colspan="2">折旧年限（年）</th>
          <th colspan="2">烧损率（%）</th>
          <th colspan="2">烧损面积（m2）</th>
          <th colspan="2">重置价值或修复费（元）</th>
          <th colspan="2">统计损失（元）</th>
        </tr>
        <tr v-for="(item,index) in tableData.decorationLossObj" :key="index+'a'">
          <td>{{ index+1 }}</td>
          <td v-for="(value,key) in item" :key="key" colspan="2">
            <input v-if="patternIsEdit" v-model="item[key]" type="text">
            <span v-else>{{ item[key] }}</span>
          </td>
          <td colspan="2">{{ item.rebuildValue }}</td>
        </tr>
        <tr>
          <td colspan="9">申报损失小计 {{ declareTotal }} 元</td>
          <td colspan="10">统计损失小计 {{ practicalTotal }} 元</td>
        </tr>
        <tr>
          <th rowspan="10">设备及其他财产</th>
          <th rowspan="2">序号</th>
          <th rowspan="2" colspan="2">名称</th>
          <th rowspan="2" colspan="2">数量</th>
          <th rowspan="2" colspan="2">购进时单价（元）</th>
          <th rowspan="2" colspan="2">已使用时间（年）</th>
          <th rowspan="2" colspan="2">折旧年限（年）</th>
          <th rowspan="2" colspan="2">烧损率（%）</th>
          <th colspan="4">重置价值</th>
          <!-- <th colspan="2">重置价值或修复费（元）</th> -->
          <th rowspan="2" colspan="2">统计损失（元）</th>
        </tr>
        <tr>
          <th colspan="2">单价</th>
          <th colspan="2">数量</th>
        </tr>
        <tr v-for="(item,index) in tableData.deviceLossObj" :key="index+'b'">
          <td>{{ index+1 }}</td>
          <td v-for="(value,key) in item" :key="key" colspan="2">
            <input v-if="patternIsEdit" v-model="item[key]" type="text">
            <span v-else>{{ item[key] }}</span>
          </td>
          <td colspan="2">
            {{ parseInt(item.unitPrice) * parseInt(item.unitCount) || '' }}
          </td>
        </tr>
        <tr>
          <td colspan="9">申报损失小计 {{ deviceDeclareTotal }} 元</td>
          <td colspan="10">统计损失小计 {{ devicePracticalTotal }} 元</td>
        </tr>
        <tr>
          <th colspan="10">申报损失总计 {{ declareTotal + deviceDeclareTotal }} 元</th>
          <th colspan="10">统计损失总计 {{ practicalTotal + devicePracticalTotal }} 元</th>
        </tr>
        <tr>
          <th colspan="10">
            <div style="height:120px;padding:0 10px;line-height:32px">
              <div class="text_align_left">受损单位（个人）填表人（签名）：
                <input v-if="patternIsEdit" v-model="tableData.preparer" style="width:80px;line-height: 20px;" class="custom_input" type="text">
                <span v-else>{{ tableData.preparer }}</span>
              </div>
              <div class="text_align_right">申报日期：
                <input v-if="patternIsEdit" v-model="tableData.pretime" class="custom_input" style="line-height: 20px;" type="date">
                <span v-else>{{ parseTime(tableData.pretime,'{y}年{m}月{d}日') }}</span>
              </div>
              <div class="text_align_left ">受损单位（个人）联系人：
                <input v-if="patternIsEdit" v-model="tableData.contact" style="width:150px;line-height: 20px;" class="custom_input" type="text">
                <span v-else>{{ tableData.contact }}</span>
              </div>
              <div class="text_align_right">联系电话：
                <input v-if="patternIsEdit" v-model="tableData.phone" class="custom_input" style="line-height: 20px;" type="text">
                <span v-else>{{ tableData.phone }}</span>
              </div>
            </div>
          </th>
          <th colspan="10" style="line-height:36px">
            <!-- <div style="height:120px;padding:0 10px;line-height:32px">
              <div>统计单位：杭州市公安消防支队</div>
              <div>统计人（签名）：xxx 2012年11月6日</div>
              <div>审批人（签名）：xxx 2012年11月6日</div>
            </div> -->
            <div>统计单位：
              <input v-if="patternIsEdit" v-model="tableData.statisticalUnit" class="custom_input" style="line-height: 20px;" type="text">
              <span v-else>{{ tableData.statisticalUnit }}</span>
            </div>
            <div flex="main:center">统计人（签名）：
              <input v-if="patternIsEdit" v-model="tableData.statistician" class="custom_input" style="line-height: 20px;width:80px" type="text">
              <span v-else>{{ tableData.statistician }}</span>
              <input v-if="patternIsEdit" v-model="tableData.stTime" class="custom_input" style="line-height: 20px;" type="date">
              <span v-else style="margin-left:10px">{{ tableData.stTime }}</span>
            </div>
            <div flex="main:center">审批人（签名）：
              <input v-if="patternIsEdit" v-model="tableData.approval" class="custom_input" style="line-height: 20px;width:80px" type="text">
              <span v-else>{{ tableData.approval }}</span>
              <input v-if="patternIsEdit" v-model="tableData.apTime" class="custom_input" style="line-height: 20px;" type="date">
              <span v-else style="margin-left:10px">{{ tableData.apTime }}</span>
            </div>
          </th>
        </tr>
      </table>
      <!-- <p class="margin_top_20">此文书由公安机关消防机构存档</p> -->
      <p class="margin_top_20">说明：1.受损单位（个人）应当于火灾扑灭之日起七个工作日内向火灾发生地的县级公安机关消防机构如实申报火灾直接财产损失，并附有有效证明材料。一人单位（个人）一表。
        <br>2.需要文字说明的事项可附页载明。</p>
    </div>

    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
// import { requestSave, requestGetById } from '@/api/home'
import { parseTime } from '@/utils/time'
import shareComponent from './share'

export default {

  components: { shareComponent },
  data() {
    const decorationLossObj = Array.from({ length: 8 }).map((item, index) => {
      const obj = {
        name: undefined,
        burningArea: undefined,
        buildingValue: undefined,
        buildedYear: undefined,
        rebuildYear: undefined,
        burningRate: undefined,
        burningArea1: undefined,
        rebuildValue: undefined
      }
      return obj
    })
    const deviceLossObj = Array.from({ length: 7 }).map((item, index) => {
      const obj = {
        name: undefined,
        count: undefined,
        buyingValue: undefined,
        usedValue: undefined,
        reusedYear: undefined,
        burningRate: undefined,
        unitPrice: undefined,
        unitCount: undefined
      }
      return obj
    })
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/lossDirect',
      tableData: {
        'address': 'string',
        'apTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'approval': 'string',
        'archivesId': 0,
        'contact': 'string',
        'declareTotal': 'string',
        'decorationLoss': undefined,
        'deviceLoss': 'string',
        'flag': 0,
        'id': 0,
        'phone': 'string',
        'preparer': 'string',
        'pretime': parseTime(new Date(), '{y}-{m}-{d}'),
        'stTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'statisticalUnit': 'string',
        'statistician': 'string',
        'statisticsTotal': 'string',
        'title': 'string',
        'unit': 'string',
        deviceLossObj,
        decorationLossObj

      }
    }
  },
  computed: {
    declareTotal() {
      return this.tableData.decorationLossObj.reduce((prev, curr) => {
        return prev + (parseInt(curr.buildingValue) || 0)
      }, 0)
    },
    practicalTotal() {
      return this.tableData.decorationLossObj.reduce((prev, curr) => {
        return prev + (parseInt(curr.rebuildValue) || 0)
      }, 0)
    },
    deviceDeclareTotal() {
      return this.tableData.deviceLossObj.reduce((prev, curr) => {
        return prev + (parseInt(curr.count) * parseInt(curr.buyingValue) || 0)
      }, 0)
    },
    devicePracticalTotal() {
      return this.tableData.deviceLossObj.reduce((prev, curr) => {
        return prev + (parseInt(curr.unitPrice) * parseInt(curr.unitCount) || 0)
      }, 0)
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.apTime = `${formData.apTime} 00:00:00`
      formData.pretime = `${formData.pretime} 00:00:00`
      formData.stTime = `${formData.stTime} 00:00:00`
      formData.title = '火灾直接财产损失申报统计表'
      formData.decorationLoss = JSON.stringify(formData.decorationLossObj)
      formData.deviceLoss = JSON.stringify(formData.deviceLossObj)
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const tableData = res.data
        tableData.apTime = tableData.apTime.split(' ')[0]
        tableData.pretime = tableData.pretime.split(' ')[0]
        tableData.stTime = tableData.stTime.split(' ')[0]
        const decorationLossObj = JSON.parse(tableData.decorationLoss)
        const deviceLossObj = JSON.parse(tableData.deviceLoss)
        const tableDecorationLossObj = this.tableData.decorationLossObj
        const tableDeviceLossObj = this.tableData.deviceLossObj
        tableDecorationLossObj.forEach((item, index) => {
          Object.keys(item).forEach(key => {
            item[key] = decorationLossObj[index][key]
          })
        })
        tableDeviceLossObj.forEach((item, index) => {
          Object.keys(item).forEach(key => {
            item[key] = deviceLossObj[index][key]
          })
        })
        this.tableData = tableData
        this.tableData.decorationLossObj = tableDecorationLossObj
        this.tableData.deviceLossObj = tableDeviceLossObj
      })
    }

  }
}
</script>
